<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>管理员管理介面－－－所有用户</title>
    </head>
    <body>
        <div id="webusersgrid" style="height:280px;">
        </div>
        <script>
            /*
             * Ext JS Library 2.1
             * Copyright(c) 2006-2008, Ext JS, LLC.
             * licensing@extjs.com
             *
             * http://extjs.com/license
             */
            //为了一般JS方法可以调用，这个变量定义要放在onReady外面．
            var webUserDS;
            Ext.onReady(function(){
                // fix the bug in codepress - resize
                //Ext.BoxComponent.prototype.setSize('100%', '125px');
                //search Tab
                tabs.getActiveTab().setTitle('所有用户');
                //end search Tab
                /************************************************************
                 * Display the result in page
                 * the column model has information about grid columns
                 * dataIndex maps the column to the specific data field in
                 * the data store (created below)
                 ************************************************************/
                var webUserCM = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
                    id: 'id',
                    header: "Identify",
                    dataIndex: 'id',
                    width: 50,
                    hidden: true
                }, {
                    header: "用户名称",
                    width: 50,
                    dataIndex: 'user_name'
                }, {
                    header: "登录ID",
                    width: 50,
                    dataIndex: 'login_id'
                }, {
                    header: "性别",
                    width: 30,
                    dataIndex: 'sex'
                }, {
                    header: "电话",
                    width: 100,
                    dataIndex: 'phone'
                }, {
                    header: "身份证",
                    width: 90,
                    dataIndex: 'card'
                }, {
                    header: "用户类型",
                    width: 70,
                    dataIndex: 'user_type'
                }, {
                    header: "公司名称",
                    width: 100,
                    dataIndex: 'company_name'
                }, {
                    header: "公司电话",
                    width: 100,
                    dataIndex: 'company_phone'
                }, {
                    header: "公司传真",
                    width: 100,
                    dataIndex: 'company_fax'
                }, {
                    header: "地址",
                    width: 100,
                    dataIndex: 'address'
                }, {
                    header: "邮编",
                    width: 40,
                    dataIndex: 'post_code'
                }]);
                
                /************************************************************
                 * connect to backend - grid - core part
                 * create the Data Store
                 *   connect with backend and list the result in page
                 *   through JSON format
                 ************************************************************/
                webUserDS = new Ext.data.Store({
                    // load using script tags for cross domain, if the data in on the same domain as
                    // this page, an HttpProxy would be better
                    proxy: new Ext.data.HttpProxy({
                        url: '/web_admin/getWebUsers'
                    }),
                    // create reader that reads the Topic records
                    reader: new Ext.data.JsonReader({
                        root: 'root',
                        totalProperty: 'totalProperty',
                        id: 'id'
                    }, [{
                        name: 'id'
                    }, {
                        name: 'user_name'
                    }, {
                        name: 'login_id'
                    }, {
                        name: 'sex'
                    }, {
                        name: 'phone'
                    }, {
                        name: 'card'
                    }, {
                        name: 'address'
                    }, {
                        name: 'user_type'
                    }, {
                        name: 'company_name'
                    }, {
                        name: 'company_phone'
                    }, {
                        name: 'company_fax'
                    }, {
                        name: 'post_code'
                    }])
                });
                
                //
                var searchType = new Ext.form.ComboBox({ //combobox   
                    name: 'search_type',
                    fieldLabel: '<span class="red">*</span>搜索类型',
                    //width: '80',
                    resiable: true,
                    typeAhead: true,
                    allowBlank: false,
                    handleHeight: 100, //   
                    displayField: 'key',
                    valueField: 'value',
                    selectOnFocus: true,
                    mode: 'local',
                    selectOnFocus: true,
                    triggerAction: 'all',//这个属性非常重要,可以在选择一个值以后,依然还显示其它的值.
                    readOnly: true,
                    emptyText: '选择搜索类型...',
                    store: new Ext.data.Store({
                        data: [['user_name', '按姓名'], ['user_type', '按用户类型'], ['is_locked', '按是否锁定']],
                        reader: new Ext.data.ArrayReader({
                            id: 0
                        }, [{
                            name: 'value'
                        }, {
                            name: 'key'
                        }])
                    }), //数据储存到这个comboBox   
                    anchor: '100%'
                });
                
                var searchKey = new Ext.form.TextField({
                    fieldLabel: '关键字',
                    allowBlank: false,
                    name: 'search_key',
                    anchor: '100%',
                    hideLabel: true
                });
                
                var searchFormPannel = new Ext.FormPanel({
                    //height: 20,
                    labelWidth: 50,
                    //frame: true,
                    labelAlign: 'right',
                    baseCls: 'x-plain',
                    defaults: {
                        width: 300,
                        height: 20
                    },
                    items: [{
                        layout: 'column',
                        border: false,
                        items: [{
                            columnWidth: .5,
                            layout: 'form',
                            border: false,
                            items: [searchType]
                        }, {
                            columnWidth: .5,
                            layout: 'form',
                            border: false,
                            items: [searchKey]
                        }]
                    }]
                });
                function onSearchClick(){
                    webUserDS.baseParams.search_type = searchType.getValue();
                    webUserDS.baseParams.search_key = searchKey.getValue();
                    webUserDS.load({
                        params: {
                            start: 0,
                            limit: 10
                        }
                    });
                    webUserDS.baseParams.search_type = null;
                    webUserDS.baseParams.search_key = null;
                }
                /************************************************************
                 * add a paging toolbar to the grid's footer
                 ************************************************************/
                var myPagingToolbar = new Ext.PagingToolbar({
                    pageSize: 10,
                    displayInfo: true,
                    displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                    emptyMsg: "没有记录",
                    store: webUserDS
                });
                
                /************************************************************
                 * Define menubar now in here
                 *   add and delete functions
                 ************************************************************/
                var menubar = [searchFormPannel, {
                    text: '搜索',
                    tooltip: '搜索',
                    iconCls: 'finding',
                    handler: function(){
                        onSearchClick();
                    }
                }, '-', {
                    text: '增加用户',
                    tooltip: '增加用户',
                    iconCls: 'addItem',
                    handler: function(){
                        CreateWebUser(webUserDS);
                    }
                }, '-', {
                    text: '删除用户',
                    tooltip: 'Remove the selected items',
                    iconCls: 'remove',
                    handler: function(){
                        DeleteWebUser(webUserDS, webUserGridPanel);
                    }
                }, '-', {
                    text: '编辑用户',
                    tooltip: '编辑用户',
                    iconCls: 'editItem',
                    handler: function(){
                        // delete costlevel now - action
                        EditWebUser(webUserDS, webUserGridPanel);
                    }
                }];
                /************************************************************
                 * define grid panel now
                 ************************************************************/
                var webUserGridPanel = new Ext.grid.GridPanel({
                    border: false,
                    el: 'webusersgrid',
                    ds: webUserDS,
                    cm: webUserCM,
                    autoWidth: true,
                    viewConfig: {
                        forceFit: true
                    },
                    loadMask: true,
                    iconCls: 'icon-grid',
                    collapsible: true,
                    animCollapse: false,
                    autoWidth: true,
                    //frame: true,
                    title: '用户列表',
                    tbar: menubar,
                    bbar: myPagingToolbar
                });
                
                //panel render
                webUserGridPanel.render();
                // trigger the data store load
                webUserDS.load({
                    params: {
                        start: 0,
                        limit: 10
                    }
                });
            });
            //---------------------Create WebUser------------------------
            function CreateWebUser(dataStore){
                // pre-define fields in the form
                var userName = new Ext.form.TextField({
                    fieldLabel: '姓名',
                    allowBlank: false,
                    name: 'user_name',
                    anchor: '90%'
                });
                
                var sexMale = new Ext.form.Radio({
                    fieldLabel: '性别',
                    name: 'sex',
                    id: 'sex_male',
                    boxLabel: '男',
                    checked: true,
                    inputValue: '男'
                });
                var sexFemale = new Ext.form.Radio({
                    name: 'sex',
                    id: 'sex_female',
                    boxLabel: '女',
                    checked: false,
                    hideLabel: true,
                    inputValue: '女'
                });
                
                var phone = new Ext.form.TextField({
                    fieldLabel: '个人电话',
                    allowBlank: false,
                    name: 'phone',
                    anchor: '90%'
                });
                
                var email = new Ext.form.TextField({
                    fieldLabel: '电子邮件',
                    allowBlank: false,
                    name: 'email',
                    vtype: 'email',
                    anchor: '90%'
                });
                
                var card = new Ext.form.TextField({
                    fieldLabel: '身份证',
                    allowBlank: false,
                    name: 'card',
                    anchor: '90%'
                });
                
                var companyName = new Ext.form.TextField({
                    fieldLabel: '公司名称',
                    allowBlank: false,
                    name: 'company_name',
                    anchor: '90%'
                });
                
                var companyPhone = new Ext.form.TextField({
                    fieldLabel: '公司电话',
                    allowBlank: false,
                    name: 'company_phone',
                    anchor: '90%'
                });
                
                var companyFax = new Ext.form.TextField({
                    fieldLabel: '公司传真',
                    allowBlank: false,
                    name: 'company_fax',
                    anchor: '90%'
                });
                
                var address = new Ext.form.TextField({
                    fieldLabel: '公司地址',
                    allowBlank: false,
                    name: 'address',
                    anchor: '90%'
                });
                
                var postCode = new Ext.form.TextField({
                    fieldLabel: '公司邮编',
                    allowBlank: false,
                    name: 'post_code',
                    anchor: '90%'
                });
                var formPanel = new Ext.form.FormPanel({
                    //baseCls: 'x-plain',
                    labelWidth: 75,
                    labelAlign: 'right',
                    frame: true,
                    url: '/web_admin/addWebUserBaseInfo',
                    items: [userName, {
                        layout: 'column',
                        border: false,
                        items: [{
                            columnWidth: .5,
                            layout: 'form',
                            border: false,
                            items: [sexMale]
                        }, {
                            columnWidth: .5,
                            layout: 'form',
                            border: false,
                            items: [sexFemale]
                        }]
                    }, email, phone, card, companyName, companyPhone, companyFax, address, postCode]
                });
                
                // define window and show it in desktop
                var window = new Ext.Window({
                    title: '增加新用户',
                    minimizable: true,
                    maximizable: true,
                    width: 500,
                    height: 350,
                    minWidth: 500,
                    minHeight: 350,
                    layout: 'fit',
                    plain: true,
                    bodyStyle: 'padding:5px;',
                    buttonAlign: 'center',
                    items: formPanel,
                    modal: true,
                    buttons: [{
                        text: '增加',
                        handler: function(){
                            // check form value 
                            if (formPanel.form.isValid()) {
                                formPanel.form.submit({
                                    waitMsg: 'In processing',
                                    success: function(form, action){
                                        Ext.MessageBox.alert('Confirm', '提交成功');
                                        window.destroy();
                                        webUserDS.load({
                                            params: {
                                                start: 0,
                                                limit: 10
                                            }
                                        });
                                    },
                                    failure: function(form, action){
                                        Ext.MessageBox.alert('提交错误消息', '提交失败');
                                    }
                                });
                            }
                            else {
                                Ext.MessageBox.alert('错误提示', '请按要求填写必输选项.');
                            }
                        }
                    }, {
                        text: '取消',
                        handler: function(){
                            window.destroy();
                        }
                    }]
                });
                
                window.show();
            };
            //----------------Delete WebUser--------------------------
            function DeleteWebUser(dataStore, webUserGridPanel){
                // get the selected items
                var m = webUserGridPanel.getSelections();
                if (m.length > 0) {
                    Ext.MessageBox.confirm('提示', '你真的要删除这些用户吗？', function(btn){
                        if (btn == 'yes') {
                            var jsonData = "[";
                            for (var i = 0, len = m.length; i < len; i++) {
                                var ss = "{\"id\":\"" + m[i].get("id") + "\"}";
                                if (i == 0) 
                                    jsonData = jsonData + ss;
                                else jsonData = jsonData + "," + ss;
                                dataStore.remove(m[i]);
                            }
                            jsonData = jsonData + "]";
                            //Ext.MessageBox.alert(jsonData);
                            dataStore.load({
                                params: {
                                    start: 0,
                                    limit: 10,
                                    delData: jsonData
                                }
                            });
                        }
                    });
                }
                else {
                    Ext.MessageBox.alert('错误提示', '要删除用户时，请至少选择一个用户');
                }
            };
            
            //------------Edit WebUser-----------------
            function EditWebUser(webUserDS, webUserGridPanel){
                //Ready common combobox
                var m = webUserGridPanel.getSelections();
                if (m.length > 0 && m.length == 1) {
                    var selectedId = m[0].get("id");
                    // pre-define fields in the form
                    var userName = new Ext.form.TextField({
                        fieldLabel: '姓名',
                        allowBlank: false,
                        name: 'user_name',
                        anchor: '90%'
                    });
                    
                    var sexMale = new Ext.form.Radio({
                        fieldLabel: '性别',
                        name: 'sex',
                        id: 'sex_male',
                        boxLabel: '男',
                        checked: true,
                        inputValue: '男'
                    });
                    var sexFemale = new Ext.form.Radio({
                        name: 'sex',
                        id: 'sex_female',
                        boxLabel: '女',
                        checked: false,
                        hideLabel: true,
                        inputValue: '女'
                    });
                    
                    var phone = new Ext.form.TextField({
                        fieldLabel: '个人电话',
                        allowBlank: false,
                        name: 'phone',
                        anchor: '90%'
                    });
                    
                    var email = new Ext.form.TextField({
                        fieldLabel: '电子邮件',
                        allowBlank: false,
                        name: 'email',
                        vtype: 'email',
                        anchor: '90%'
                    });
                    
                    var card = new Ext.form.TextField({
                        fieldLabel: '身份证',
                        allowBlank: false,
                        name: 'card',
                        anchor: '90%'
                    });
                    
                    var companyName = new Ext.form.TextField({
                        fieldLabel: '公司名称',
                        allowBlank: false,
                        name: 'company_name',
                        anchor: '90%'
                    });
                    
                    var companyPhone = new Ext.form.TextField({
                        fieldLabel: '公司电话',
                        allowBlank: false,
                        name: 'company_phone',
                        anchor: '90%'
                    });
                    
                    var companyFax = new Ext.form.TextField({
                        fieldLabel: '公司传真',
                        allowBlank: false,
                        name: 'company_fax',
                        anchor: '90%'
                    });
                    
                    var address = new Ext.form.TextField({
                        fieldLabel: '公司地址',
                        allowBlank: false,
                        name: 'address',
                        anchor: '90%'
                    });
                    
                    var postCode = new Ext.form.TextField({
                        fieldLabel: '公司邮编',
                        allowBlank: false,
                        name: 'post_code',
                        anchor: '90%'
                    });
                    // create form panel
                    var editFormPanel = new Ext.form.FormPanel({
                        //baseCls: 'x-plain',
                        frame: true,
                        labelWidth: 75,
                        labelAlign: 'right',
                        url: '/web_admin/setWebUserBaseInfo?id=' + selectedId,
                        reader: new Ext.data.JsonReader({
                            root: 'root'
                        }, [{
                            name: 'user_name'
                        }, {
                            name: 'sex'
                        }, {
                            name: 'phone'
                        }, {
                            name: 'email'
                        }, {
                            name: 'card'
                        }, {
                            name: 'address'
                        }, {
                            name: 'company_name'
                        }, {
                            name: 'company_phone'
                        }, {
                            name: 'company_fax'
                        }, {
                            name: 'post_code'
                        }]),
                        items: [userName, {
                            layout: 'column',
                            border: false,
                            items: [{
                                columnWidth: .5,
                                layout: 'form',
                                border: false,
                                items: [sexMale]
                            }, {
                                columnWidth: .5,
                                layout: 'form',
                                border: false,
                                items: [sexFemale]
                            }]
                        }, email, phone, card, companyName, companyPhone, companyFax, address, postCode]
                    });
                    
                    // load form and assign value to fields
                    editFormPanel.form.load({
                        url: '/web_admin/getWebUserBaseInfoByID?id=' + selectedId,
                        waitMsg: '正在载入数据...',
                        success: function(form, action){
                        },
                        failure: function(form, action){
                            Ext.MessageBox.alert('提示信息', '信息加载失败');
                        }
                    });
                    
                    // define window and show it in desktop
                    var editWindow = new Ext.Window({
                        title: '编辑用户',
                        width: 500,
                        height: 350,
                        minWidth: 500,
                        minHeight: 350,
                        layout: 'fit',
                        plain: true,
                        bodyStyle: 'padding:5px;',
                        buttonAlign: 'center',
                        items: editFormPanel,
                        modal: true,
                        buttons: [{
                            text: '提交',
                            handler: function(){
                                // check form value 
                                if (editFormPanel.form.isValid()) {
                                    editFormPanel.form.submit({
                                        waitMsg: '处理过程中...',
                                        failure: function(form, action){
                                            //debugger;
                                            Ext.MessageBox.alert('错误提示', action.failureType);//.errorInfo +'提交不成功');
                                        },
                                        success: function(form, action){
                                            Ext.MessageBox.alert('确认', '提交成功');
                                            editWindow.destroy();
                                            webUserDS.load({
                                                params: {
                                                    start: 0,
                                                    limit: 10
                                                }
                                            });
                                        }
                                    });
                                }
                                else {
                                    Ext.MessageBox.alert('错误提示', '请按要求填写必输选项.');
                                }
                            }
                        }, {
                            text: '取消',
                            handler: function(){
                                editWindow.destroy();
                            }
                        }]
                    });
                    editWindow.show();
                }
            }
        </script>
    </body>
</html>
